<!DOCTYPE HTML>
<html>

<head>
<!-- *** 奇遇网络科技 * 提供技术支持 // 网站设计‘代码编写：徐国胜 QQ：63224033 电话：13166668180 *** -->
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="description" content="A short description of your company">
<meta name="keywords" content="Some keywords that best describe your business">
<title>Cloud Host - Shortcodes Lightbox</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic|Cutive' rel='stylesheet' type='text/css'>
<link href="style.css" media="screen" rel="stylesheet" type="text/css">

<!-- main-js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/general.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--/ main-js -->

<!-- shortcode: Tabs -->
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<!-- shortcode: Slides images/text -->
<script type="text/javascript" language="javascript" src="js/slides.min.jquery.js"></script>
<!-- shortcode: Lightbox prettyPhoto -->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<!-- SyntaxHighlighter for shortcodes -->
<script type="text/javascript" language="javascript" src="js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="js/shBrushPlain.js"></script>
<link href="css/shCore.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" media="screen" rel="stylesheet" type="text/css" />

<!-- custom CSS -->
<link href="custom.css" media="screen" rel="stylesheet" type="text/css">

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
</head>
<body>
<div class="body_wrap">

<div class="header header_top">
	<div class="container_12">
    	
        <div class="logo">
	        <a href="index.html"><img src="images/logo.png" alt=""></a>
            <strong><span></span>CLOUDHOST</strong>
        </div>
        
		<div class="topmenu">            
	            <ul class="dropdown">
	                <li class="menu-item-home"><a href="index.html"><span>Home</span></a></li>
	                <li><a href="solutions.html"><span>Solutions</span></a></li>
                    <li><a href="pricing.html"><span>Plans & Pricing</span></a></li>
	                <li class="current-menu-ancestor"><a href="#"><span>Pages</span></a>
	                	<ul>
	                    	<li><a href="blog.html"><span>Blog - Sidebar Right</span></a></li>
	                    	<li><a href="blog-sidebar-l.html"><span>Blog - Sidebar Left</span></a></li>
	                        <li class="current-menu-ancestor"><a href="#"><span>Shortcodes</span></a>
	                            <ul>                                
	                                <li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                                <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
	                                <li><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
	                                <li><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
	                                <li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
	                                <li class="current-menu-item"><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
	                                <li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
	                                <li><a href="shortcodes-media.html"><span>Media (Videos & Img)</span></a></li>
	                                <li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
	                                <li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
	                                <li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
	                            </ul>
	                        </li>
	                        <li><a href="about.html"><span>About us</span></a></li>
	                    </ul>
	                </li>
	                <li><a href="support.html"><span>Support</span></a></li>                          
	                <li><a href="contact.html"><span>Contact</span></a></li>
	            </ul>                
		</div>
        <!--/ topmenu -->
            
    </div>
</div>

<div class="header header_thin">
	<div class="container_12">    
		<div class="breadcrumbs"><a href="index.html">Homepage</a> <span class="separator">&nbsp;</span> <a href="#">Pages</a> <span class="separator">&nbsp;</span> <a href="#">Shortcodes</a> <span class="separator">&nbsp;</span> PrettyPhoto</div>
    </div>
</div>
<!--/ header -->

<div class="middle cols2">
<div class="container_12">

<!-- content -->
    <div class="content">
    
    		<div class="post-item post-detail">
            		
                    <script type="text/javascript">
					SyntaxHighlighter.defaults['gutter'] = false;
					SyntaxHighlighter.defaults['toolbar'] = true;		
					SyntaxHighlighter.all();
					</script>    
                    
                    <div class="post-title">
                        <h1>Shortcodes: PrettyPhoto</h1>
                    </div>                            
                    
					<div class="entry">
                    
                    	<p><strong>PrettyPhoto</strong> is a jQuery <strong>lightbox clone</strong>. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full  blown media lightbox.</p>   
                    
                    <h3>prettyPhoto for Text</h3>
                    <script type="text/javascript">
						jQuery(document).ready(function($) {
							$('a[data-rel]').each(function() {
							    $(this).attr('rel', $(this).data('rel'));
							});
							$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false});
						});
					</script>
					<p><a href="images/temp/entry_img_1.jpg" data-rel="prettyPhoto" title="Title of Image">Open image with prettyPhoto</a></p>

<pre class="brush: plain">
[prettyPhoto title="Title of Image" href="wp-content/themes/cafe-lounge/images/temp/2.jpg"]
Open image in prettyPhoto
[/prettyPhoto]
</pre>                 
					<h3>Button prettyPhoto</h3>  
                    
                    <p><a href="images/temp/entry_img_5.jpg" class="button_link" data-rel="prettyPhoto" title="Button prettyPhoto"><span>Open image in prettyPhoto</span></a></p>  
                    
<pre class="brush: plain">
[prettyPhoto title="Title of Image" href="wp-content/themes/cafe-lounge/images/temp/3.jpg"]
[button link="#"]Open image in prettyPhoto[/button]
[/prettyPhoto]
</pre>  
					<h3>prettyPhoto for elements:</h3>
                    
                    <p><a href="images/temp/entry_img_3.jpg" data-rel="prettyPhoto" title="Text Title"><img src="images/temp/entry_img_6.jpg" width="222" height="128" alt="" class="frame_box"></a></p>

<pre class="brush: plain">
[prettyPhoto title="Title of Image" href="wp-content/themes/cafe-lounge/images/temp/4.jpg"]
<img src="images/temp/portfolio_mid_img_9.html" width="256" height="150" alt="">
[/prettyPhoto]
</pre>  
                    
					<h3>Image Gallery with prettyPhoto</h3>
					<p>
                    <a href="images/temp/entry_img_3.jpg" data-rel="prettyPhoto[gal_1]" title="Image Gallery prettyPhoto, image 1"><img src="images/temp/pricelist_2.jpg" width="60" height="60" alt=""></a> &nbsp;
                    <a href="images/temp/entry_img_1.jpg" data-rel="prettyPhoto[gal_1]" title="Image Gallery prettyPhoto, image 2"><img src="images/temp/pricelist_1.jpg" width="60" height="60" alt=""></a> &nbsp;
                    <a href="images/temp/entry_img_5.jpg" data-rel="prettyPhoto[gal_1]" title="Image Gallery prettyPhoto, image 3"><img src="images/temp/pricelist_3.jpg" width="60" height="60" alt=""></a>
                    </p>
                    
<pre class="brush: plain">
[prettyPhoto_gallery id="gal_1"]
[prettyPhoto title="Title of Image 1" href="wp-content/themes/cafe-lounge/images/temp/2.jpg"]<img src="images/temp/flickr_photo_1.html" width="40" height="40" alt="">[/prettyPhoto]

[prettyPhoto title="Title of Image 2" href="wp-content/themes/cafe-lounge/images/temp/2.jpg"]<img src="images/temp/flickr_photo_2.html" width="40" height="40" alt="">[/prettyPhoto]

[prettyPhoto title="Title of Image 3" href="wp-content/themes/cafe-lounge/images/temp/2.jpg"]<img src="images/temp/flickr_photo_4.html" width="40" height="40" alt="">[/prettyPhoto]

[/prettyPhoto_gallery]
</pre>                     
               <h3>YouTube and Vimeo video in Lightbox </h3>
               <p><a href="http://sc.chinaz.com/?watch?v=1R0UHHkoGxU" data-rel="prettyPhoto" title=""><img src="images/YouTube_logo.png" alt="YouTube Vieo" width="60"></a> &nbsp; 
               <a href="http://sc.chinaz.com/?20266292&amp;width=600" data-rel="prettyPhoto" title=""><img src="images/Vimeo_logo.png" alt="Vimeo Video" width="60"></a></p>   
               
<pre class="brush: plain">
[prettyPhoto href="http://sc.chinaz.com/?watch?v=1R0UHHkoGxU" title="YouTube Video"]
<img src="images/YouTube_logo.png" alt="YouTube Vieo" width="60">
[/prettyPhoto]

[prettyPhoto href="http://sc.chinaz.com/?20266292&amp;width=600" title="Vimeo Video"]
<img src="images/Vimeo_logo.png" alt="Vimeo Video" width="60">
[/prettyPhoto]
</pre>  
        		<h3>prettyPhoto open in iframe</h3>
                <p><a href="http://www.msn.com/?iframe=true&amp;width=900&amp;height=400" data-rel="prettyPhoto[iframe]" class="button_link btn_blue" title="MSN.com in iframe"><span>MSN.com in iframe</span></a> &nbsp;               
                <a href="http://www.cnn.com/?iframe=true&amp;width=990&amp;height=600" data-rel="prettyPhoto[iframe]" class="button_link btn_red" title="CNN in iframe"><span>CNN in iframe</span></a></p>

<pre class="brush: plain">
[prettyPhoto href="http://www.google.com/search?ie=UTF-8&amp;oe=UTF-8&amp;q=prettyphoto&amp;iframe=true&amp;width=900&amp;height=500" title="Google in Frame"]
[button link="#" style="btn_red"]Google.com in iframe[/button]
[/prettyPhoto]

[prettyPhoto href="http://www.cnn.com?iframe=true&amp;width=600&amp;height=300" title="Facebook in Frame"]
[button link="#" style="btn_blue"]CNN in iframe[/button]
[/prettyPhoto]
</pre> 

                    <div class="clear"></div>     
                  	</div>       
			</div>
            <!--/ post item -->
                        
            
            
                        
        
	</div>
<!--/ content --> 

<!-- sidebar -->
	<div class="sidebar">
    	
        <div class="sidebar_inner">
        	
            <!-- search widget -->
			<div class="widget-container widget_search">
                            <form method="get" id="searchform" action="#">
                                <div>
                                  <label class="screen-reader-text" for="s">Search for:</label>
                                    <input class="input_search" name="s" id="s" value="Search this blog" onfocus="if (this.value == 'Search this blog') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this blog';}" type="text" />
                                    <input id="searchsubmit" class="btn-submit" value="Submit" type="submit" />
                                </div>
                            </form>
			</div> 
			<!--/ search widget -->
            
            <div class="widget-container widget_categories">
	            	<h3 class="widget-title">Shortcodes Categories</h3>
	                    <ul>
                       		<li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
	                        <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
							<li><a href="shortcodes-tabs.html"><span>Tabs & Toggles</span></a></li>
							<li><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
							<li><a href="shortcodes-columns.html"><span>Columns</span></a></li>  
							<li class="current-menu-item"><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
							<li><a href="shortcodes-tables.html"><span>Tables & Boxes</span></a></li>
							<li><a href="shortcodes-media.html"><span>Media (Videos & Images)</span></a></li>
							<li><a href="shortcodes-maps.html"><span>Maps & Locations</span></a></li>                                
							<li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
							<li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
                    	</ul>
                        
			</div> 
             
            
            
            
        </div>		
        <div class="sidebar_bottom"></div> 
    </div>
<!--/ sidebar -->

	<div class="clear"></div>  
</div>
</div>
<!--/ middle -->

<div class="footer">
	<div class="container_12">
    
    	<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">OUR HOSTING</h3>
                    <ul>
                        <li><a href="#"><span>Website Hosting</span></a></li>                            
                        <li><a href="#"><span>Reseller Hosting</span></a></li>                        	
                        <li><a href="#"><span>Cloud Servers</span></a></li>  
                        <li><a href="#"><span>Site Supercharge</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 1 -->
		<div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">AFFILIATES</h3>
                    <ul>
                        <li><a href="#"><span>Hosting Affiliates</span></a></li>                            
                        <li><a href="#"><span>Affiliate Banners</span></a></li>                        	
                        <li><a href="#"><span>Affiliate Login</span></a></li>  
                        <li><a href="#"><span>Affiliate Sign-up</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 2 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">SUPPORT</h3>
                    <ul>
                        <li><a href="#"><span>Knowledgebase</span></a></li>                            
                        <li><a href="#"><span>Community Forum</span></a></li>                        	
                        <li><a href="#"><span>Video Tutorials</span></a></li>  
                        <li><a href="#"><span>Contact Live Support</span></a></li>  
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 3 -->   
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">ABOUT US</h3>
                    <ul>
                        <li><a href="#"><span>About Cloud-Host</span></a></li>                            
                        <li><a href="#"><span>Our Team</span></a></li>
                        <li><a href="#"><span>In the Press</span></a></li>  
                        <li><a href="#"><span>Contact us directly</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 --> 
        <div class="grid_2">        	
            <div class="widget-container widget_nav_menu">
                	<h3 class="widget-title">CAREERS</h3>
                    <ul>
                        <li><a href="#"><span>Join our team</span></a></li>
                        <li><a href="#"><span>Job Offerings Board</span></a></li>
                        <li><a href="#"><span>Send your Resume</span></a></li>
                    </ul>
			</div>        	
        </div>
        <!--/ footer col 4 -->  
        <div class="grid_2">
        		<!-- widget contacts -->
                    <div class="widget-container widget_contact">                    
                    	<h3>OUR ADDRESS</h3>
						<div class="contact-address">
                            <div class="address">Rue Teissere, #.24 0600 <br /> Cannes, France</div>
                            <div class="phone">Phone: <strong>+33(0)9399 7987</strong></div>
                            <div class="fax">Fax: <strong>+33(0)9399 7988</strong></div>
                        </div>                            
                    </div>
				<!--/ widget contacts --> 
        </div>
        <!--/ footer col 4 -->
    	
    	<div class="divider"></div>
	    	
    	<div class="footer_support">
	        <div class="icon_write_mail"><a href="#">Write us an Email</a></div>
	        <div class="icon_live_chat"><a href="#">Live Chat 24 / 7</a></div>
	        <div class="icon_phone">Support: +33 (0) 9399 7987</div>
            <div class="clear"></div>
        </div>  
    
	    <div class="copyright">
	        <p>&copy; Copyright 2013  |   Hosting Co. All rights reserved.</p>
		</div>
    
    	<div class="clear"></div>
        
    </div>
</div>

</div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
